import * as React from 'react'
import {useState,useEffect} from 'react'
import { useNavigate  } from 'react-router-dom';
import './user.css'
import Header from '../components/header.jsx'
import copyPng from "../assets/icons/copy.png"
import personBanner from "../assets/images/personBanner.png"
import userPng from '../assets/icons/user.png'
import { Toast } from 'react-vant';
import { Options, User } from '../lib/aonweb/aon-web.es'

function UserPage() {
  const navigateTo  = useNavigate();
  const [account, setAccount] = useState('some-account-value');  
  const [columns, setColumns] = useState([/* ...初始的列数据... */]);  
  // hook API
  useEffect(() => {  
    // 组件挂载后执行的函数  
    getAccount();  
  }, []); // 传入空数组以确保只在组件首次渲染后执行 
  
  const handleCopy=async ()=>{
    try {
      await navigator.clipboard.writeText(account);
      Toast('复制成功');
    } catch (err) {
      Toast('复制失败');
    }
  }
  const goToComplete=()=>{
  
    navigateTo('/complete')
  }
  const goToCreate=()=>{
    navigateTo('/')
  }
// https://app.aonet.ai/api
// https://app.aonet.ai/kvapi
 const getAccount=async()=> {
	const options = new Options({
		type: Options.LoginTypes.TYPE_FP,
		server: 'https://app.aonet.ai',
		storeage_url: 'https://app.aonet.ai'
	});

	console.log(options)

	//User 的使用方法
	let user = new User(options)
	let addr = await user.login()
	console.log("getWeb3 account", addr)
	// account.value = addr[0]
  setAccount(addr[0])

	// //detectEthereumProvider 的使用方法
	// let ethereum = await detectEthereumProvider(options)
	// if (ethereum) {
	// 	// console.log(ethereum)
	// 	const web3 = new Web3(ethereum);
	// 	try {
	// 		let account = await ethereum.request({ method: 'eth_requestAccounts' })
	// 		console.log('getWeb3 account', account)
	// 		account = account[0]
	// 		return web3;
	// 	} catch (error) {
	// 		// User denied account access...
	// 		return null;
	// 	}
	// }

	// // AI 使用方法
	// const ai_options = {
	// 	//Please replace with your own API key or jwt token.
	// 	auth: "$API_KEY"
	// }

	// const aonet = new AI(ai_options)

	// let response = await aonet.prediction("/predictions/ai/face-to-many",
	// 	{
	// 		input: {
	// 			"image": "https://aonet.ai/pbxt/KW7CdCusXMkkOs9bbCGYsInC8EUxlj3yBLxvfW9Fs9FFMZUL/MTk4MTczMTkzNzI1Mjg5NjYy.webp",
	// 			"style": "3D",
	// 			"prompt": "a zombie in a fire, burning flames behind him",
	// 			"negative_prompt": "boring",
	// 			"prompt_strength": 4.5,
	// 			"denoising_strength": 1,
	// 			"instant_id_strength": 0.8
	// 		}
	// 	})
	// console.log("test", response)
}



  return (
    <>
    <Header></Header>
    <div className="user">  
    <div className="container">  
      <div className="ava-con">  
        <img className="ava" src={userPng} alt="" />  
        <div className="ava-con-r">  
          <p className="userId">user-125482</p>  
          <p className="address">  
            {account}  
            <img  
              className="copy"  
              src={copyPng}  
              onClick={handleCopy}  
              alt=""  
            />  
          </p>  
        </div>  
      </div>  
      <img  
        className="person-banner"  
        src={personBanner}  
        onClick={goToComplete}  
        alt=""  
      />  

      {/* 这里省略了 My Work 部分，因为它涉及到更复杂的逻辑和可能的组件拆分 */}  

      <div className="bottom_btn">  
        <button onClick={goToCreate}>  
          Go To Create  
        </button>  
      </div>  
    </div>  
  </div> 
  </>
  );
}

export default UserPage;
